@use '../core' as *;

.header {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--color-bg-site-header);

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    #{$selector-darkmode} & {
        background: var(--color-bg-primary);
        border-bottom: 1px solid var(--color-border-primary);
    }
}

.headerInner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: calc(var(--layout-max-width) + var(--layout-horizontal-margins) * 2);
    margin-left: auto;
    margin-right: auto;

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        flex-wrap: nowrap;
    }
}

.headerLogo {
    display: flex;
    align-items: center;
    min-height: var(--layout-site-header-height);
    padding: $spacing-size-2 10px;
    margin-left: calc(var(--layout-horizontal-margins) - 16px);

    :global(.logotype) {
        width: unset;
        height: 34px;
    }

    :global(.logo-mark) {
        width: 48px;
        height: unset;
        transform: translateY(0.5px); // improve logo rendering for low dpi screens
    }
}

.docsNavBtnSearchContainer {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-size-2 $spacing-size-4;
    width: 100%;
    margin: 0 var(--layout-horizontal-margins) $spacing-size-4 var(--layout-horizontal-margins);

    @media screen and (min-width: $breakpoint-site-header-extra-small) {
        flex-wrap: nowrap;
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        display: contents;
    }

    @media screen and (min-width: $breakpoint-site-header-small) {
        order: 4;
    }

    @media screen and (min-width: $breakpoint-site-header-medium) {
        display: flex;
        order: unset;
        width: unset;
        margin: 0 0 0 auto;
    }
}

button.mobileNavButton {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    color: var(--color-button-primary-fg);

    &:hover {
        background-color: rgba(0, 0, 0, 0.1);
        color: var(--color-button-primary-fg);
    }

    :global(.icon) {
        --icon-size: #{$spacing-size-6};
        --color-icon: var(--color-button-primary-fg);
        fill: var(--color-button-primary-fg);

        margin-left: $spacing-size-1;
        margin-right: -$spacing-size-1;
    }

    @media screen and (min-width: $breakpoint-site-header-extra-small) {
        max-width: 120px;
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        display: none;
    }

    #{$selector-darkmode} & {
        background: color-mix(in srgb, var(--color-white), transparent 94%);

        &:hover {
            background-color: var(--color-button-secondary-bg-hover);
        }
    }
}

.mobileMenuButton {
    appearance: none;
    position: absolute;
    top: 0;
    right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--layout-site-header-height);
    width: var(--layout-site-header-height);
    padding: 0 16px 0 14px;
    border-radius: var(--radius-none);
    border: none;
    color: transparent;
    background-color: transparent;
    transition: background-color 0.4s ease-in-out;

    &:hover {
        background-color: transparent;
    }

    &:focus {
        box-shadow: none;
    }

    &:focus-visible {
        box-shadow: inset 0 0 0 2px var(--color-button-primary-shadow-focus);
    }

    svg {
        position: relative;
        left: 1px;
    }

    @media screen and (min-width: $breakpoint-site-header-small) {
        display: none;
    }
}

.menuIcon {
    g {
        transition: transform 0.2s 0.2s;
    }

    rect {
        fill: var(--color-white);
        transition: transform 0.2s;
    }

    :global(.middle) {
        transition: opacity 0s 0.2s;
    }

    :global(.top) rect {
        transform-origin: center 8px;
    }

    :global(.bottom) rect {
        transform-origin: center 28px;
    }

    .mobileMenuButton[aria-expanded='true'] & {
        g {
            transition: transform 0.2s;
        }

        rect {
            transition: transform 0.2s 0.2s;
        }

        :global(.top) {
            transform: translateY(10px);
        }

        :global(.top) rect {
            transform: rotate(45deg);
        }

        :global(.middle) {
            opacity: 0;
        }

        :global(.bottom) {
            transform: translateY(-10px);
        }

        :global(.bottom) rect {
            transform: rotate(-45deg);
        }
    }
}

.mainNav,
#mainNav {
    width: 100%;
    background-color: var(--color-bg-mobile-nav);

    @media screen and (min-width: $breakpoint-site-header-small) {
        width: auto;
        margin-right: $spacing-size-2;
        margin-left: auto;
    }
}

.navItemList {
    @media screen and (min-width: $breakpoint-site-header-small) {
        display: flex;
        height: var(--layout-site-header-height);
        align-items: center;
        justify-content: flex-end;
    }
}

.navItem {
    @media screen and (max-width: $breakpoint-site-header-small) {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    @media screen and (min-width: $breakpoint-site-header-small) {
        &:hover a::after {
            opacity: 0.25;
            transform: scaleX(1);
        }

        &.navItemActive .navLink {
            #{$selector-darkmode} & {
                opacity: 1;
            }
        }

        &.navItemActive a::after {
            opacity: 0.5;
            transform: scaleX(1);

            #{$selector-darkmode} & {
                opacity: 0.75;
            }
        }
    }

    #{$selector-darkmode} & {
        @media screen and (min-width: $breakpoint-site-header-small) {
            border-bottom: none;
        }
    }
}

.navLink,
button.navLink {
    --horizontal-padding: #{$spacing-size-4 - 2px};

    display: block;
    position: relative;
    padding: 19px var(--layout-horizontal-margins) 16px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-white);
    transition:
        color $transition-default-timing,
        opacity $transition-default-timing;
    cursor: pointer;

    @at-root button#{&} {
        color: var(--color-white);
    }

    &:hover {
        text-decoration: none;
        color: var(--color-white);
    }

    @media screen and (min-width: $breakpoint-site-header-small) {
        padding-left: var(--horizontal-padding);
        padding-right: var(--horizontal-padding);

        &::after {
            content: '';
            position: absolute;
            height: 2px;
            bottom: 12px;
            left: calc(var(--horizontal-padding) - #{$spacing-size-1});
            right: calc(var(--horizontal-padding) - #{$spacing-size-1});
            border-radius: 2px;
            background-color: var(--color-white);
            opacity: 0;
            transform: scaleX(0);
            transition:
                transform 0.33s ease-in-out,
                opacity 0.33s ease-in-out;
        }
    }

    #{$selector-darkmode} & {
        font-weight: 500;
        opacity: 0.8;
    }
}

button.navLink {
    display: flex;
    align-items: center;
}

.githubItem {
    order: 2;
}

.buttonItem {
    a::after {
        display: none;
    }

    svg:global(.icon),
    .pseudoIcon {
        --icon-size: 24px;

        margin-right: 4px;
        border-radius: 50%;
        fill: var(--color-white);
    }

    @media screen and (min-width: $breakpoint-site-header-small) {
        span:not(.navLink) {
            display: none;
        }

        .navLink {
            padding-left: 12px;
            padding-right: 12px;
        }

        svg,
        .pseudoIcon {
            margin-right: 0;
            transition: box-shadow 0.33s ease-in-out;
        }

        .navLink:hover svg,
        .navLink:hover .pseudoIcon {
            box-shadow:
                0 0 0 4px var(--color-bg-site-header),
                0 0 0 6px rgba(white, 0.3);
        }
    }
}

.toggleDarkText {
    display: none;
    @media screen and (max-width: $breakpoint-site-header-small) {
        display: inline;
    }
}

.icon {
    width: 24px;
    height: 24px;
    margin: 2px;

    background-image: var(--dark-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
